<template>
  <text v-if="config" :style="getStyle()" :x="getX()" :y="getY()" :fill="config.color">
    <tspan
      :x="getSpanX()"
      :dx="getSpanDX()"
      :dy="0 + config.unit"
      :fill="config.color"
    >
      {{ config.symbol1 }}
    </tspan>

    <tspan
      :x="getSpanX()"
      :dx="getSpanDX1()"
      :dy="getSpanDY1()"
      :fill="config.color2"
    >
      {{ config.symbol2 }}
    </tspan>

    <tspan
      :x="getSpanX2()"
      :dx="getSpanDX2()"
      :dy="getSpanDY2()"
      :fill="config.color3"
    >
      {{ config.symbol3 }}
    </tspan>

    <tspan
      :x="getX()"
      :dx="getSpanDX3()"
      :dy="getSpanDY3()"
      :fill="config.color4"
    >
      {{ config.symbol4 }}
    </tspan>
  </text>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  computed,
  watch,
  getCurrentInstance,
} from "vue";

const props = defineProps({
  config: Object,
});

let getStyle = () => {
  if (!props.config) {
    return {};
  }
  return {
    fontSize: props.config.fontSize,
    fontFamily: props.config.fontName,
    fontWeight: props.config.fontWeight,
    textAnchor: "middle",
    dominantBaseline: "central", // 居中
  };
};
let getX = () => {
  return props.config.x1 * props.config.scale + props.config.unit;
};

let getY = () => {
  return props.config.y1 * props.config.scale + props.config.unit;
};

let getSpanX = () => {
  return props.config.x1 * props.config.scale + props.config.unit;
};

let getSpanY = () => {
  return props.config.y1 * props.config.scale + props.config.unit;
};

let getSpanDX = () => {
  return (props.config.dxs[0] || 0) * props.config.scale + props.config.unit;
};
let getSpanDY = () => {
  return (props.config.dxs[0] || 0) * props.config.scale + props.config.unit;
};

let getSpanDX1 = () => {
  return (props.config.dxs[1] || 0) * props.config.scale + props.config.unit;
};
let getSpanDY1 = () => {
  return (props.config.dys[1] || 0) * props.config.scale + props.config.unit;
};

let getSpanX2 = () => {
  return (
    (props.config.x1 + props.config.config.cx) * props.config.scale +
    props.config.unit
  );
};
let getSpanDX2 = () => {
  return (props.config.dxs[2] || 0) * props.config.scale + props.config.unit;
};
let getSpanDY2 = () => {
  return (props.config.dys[2] || 0) * props.config.scale + props.config.unit;
};

let getSpanDX3 = () => {
  return (props.config.dxs[3] || 0) * props.config.scale + props.config.unit;
};
let getSpanDY3 = () => {
  return (
    ((props.config.dys[3] || 0) - props.config.config.cy) * props.config.scale +
    props.config.unit
  );
};

onMounted(() => {

    if (props.config) { 

        // console.log("SymbolSvg--",props.config);
    }
    
});
</script>

<style lang="scss" scoped></style>
